<template>
	<view class="personalInfo plr15 ">
		<view class="header">
                请填写个人信息
		</view>
		<view class="personalBox bgWhite radius8">
            
			<uv-form labelPosition="left" :model="personaModel" :rules="personalRules" ref="form">
                <uv-form-item label="姓名"  required borderBottom  labelWidth="120rpx">
                	<uv-input v-model="personaModel.realname" border="none" placeholder="请输入您的真实姓名" >
                	</uv-input>
                </uv-form-item>
                <uv-form-item label="艺名" required  borderBottom  labelWidth="120rpx">
                    <input id="nickname-input"  @blur="getnickname"  type="nickname"  class="weui-input" placeholder="请输入昵称"/>
                </uv-form-item>
               <uv-form-item label="性别" required  borderBottom  labelWidth="120rpx">
                   <uv-radio-group v-model="personaModel.gender"  activeColor="#2CC6A1">
                   		<uv-radio 
                   			:customStyle="{margin: '8px'}" 
                   			label="男" 
                   			name="男">
                   		</uv-radio>
                        <uv-radio
                        	:customStyle="{margin: '8px'}" 
                            
                        	label="女" 
                        	name="女">
                        </uv-radio>
                   	</uv-radio-group>
               </uv-form-item>
               <uv-form-item label="类别" required  borderBottom  labelWidth="120rpx">
                   <uv-radio-group v-model="personaModel.category_id"  activeColor="#2CC6A1">
                   		<uv-radio 
                        v-for="(i,n) in cateList"
                        :key="n"
                   			:customStyle="{margin: '8px'}" 
                   			:label="i.title" 
                   			:name="i.id">
                   		</uv-radio>
                      
                   	</uv-radio-group>
               </uv-form-item>
                <uv-form-item label="头像" required  borderBottom  labelWidth="120rpx">
                    <button open-type="chooseAvatar" @chooseavatar="chooseAvatar"  >
                        <image v-if="personaModel.avatar" :src="personaModel.avatar" mode="widthFix"></image>
                    </button>
                </uv-form-item>
                <uv-form-item label="电话" required  borderBottom  labelWidth="120rpx">
                    <input v-model="personaModel.phone"  class="weui-input" placeholder="请输入电话"/>
                    
                </uv-form-item>
                <uv-form-item label="个人简介"  borderBottom  labelWidth="120rpx">
                	<uv-input v-model="personaModel.content" border="none" placeholder="请输入个人简介" >
                	</uv-input>
                </uv-form-item>
                
                
				
			</uv-form>
		</view>
		
			<view class="save_btn" @click="save">
				保存
			</view>
            <uv-checkbox-group class="mt18" v-model="checkboxValue" shape="circle">
            			<uv-checkbox name="1"
            				activeColor="#2CC6A1"
            			>
                        <view class="" style="color: #979797;" slot="default">
                            我已阅读并同意 <text @click.stop="toIndex(1)" style="color: #2CC6A1;">《用户服务协议》</text >和 <text @click.stop="toIndex(2)" style="color: #2CC6A1;"> 隐私政策</text>
                        </view>
                        
                        </uv-checkbox>
            		</uv-checkbox-group>
		
        <uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"
            @confirm="areaConfirm"></uv-picker>
	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				personaModel: {
                    user_id:"",
                    realname:"",
					nickname: "",
                    gender:"男",
                    category_id:"",
                    avatar:"",
                    phone:"",
                    content:"",
                  
				},
				personalRules: {},
                areaRrand: [
                    [],
                    []
                ],
                columnData:[],
                area:"",
                checkboxValue:[],
                cateList:[]
			};
		},
        onReady() {
            
        },
		onLoad() {
            this.getCate()
          
		  
		},
		methods: {
            wechatlogin(){
              uni.login({
              	provider: 'weixin',
              	"onlyAuthorize": true,
              	success: async function (data) {
              		console.log(data)
              	},
              	fail: function (err) {
              		
              		console.log('登录授权失败', err.code)
              	},
              });  
            },
            getnickname(e){
                    console.log(e)
                    
            },
            async getCate(){
                const {code, data} =  await this.$api.categorylist()
                console.log(code, data)
                if(code==200){
                    this.cateList=data
                }
            },
            
            async getUserInfo(){
                const {data} =  await this.$api.userinfo()
                this.area = data.areaname
                this.personaModel= data
            },
            areaConfirm(e) {
                this.area =  e.value[1]
                this.AreaData.map(item=>{
                    item.child.map(i=>{
                        if(i.name==e.value[1]){
                            this.personaModel.area = i.id
                        }
                    })
                })
                
            },
            carChange(e){
                    const { columnIndex , index} = e
                	if (columnIndex === 0) {
                		this.$refs.areaPicker.setColumnValues(1, this.columnData[index])
                	}
            },
            async  getAreaList(){
                let data =await this.$api.getAreaList()
                this.AreaData = data.data
                data.data.map((item,n)=>{
                    this.areaRrand[0].push({
                        name:item.name,
                        id:item.id
                    })
                    let arr= []
                    item.child.map(i=>{
                        arr.push(i.name)
                        if(n==0){
                            if(arr.length==item.child.length){
                                    this.areaRrand[1]=arr
                                    this.columnData.push(arr)
                                    arr= []
                            }
                        }else{
                            if(arr.length==item.child.length){
                                    this.columnData.push(arr)
                                    arr= []
                            }
                        }
                    })
                })
                
                
            },
            toIndex(){
                
            },
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
            checkCity(type){
                    
                    this.$refs.areaPicker.open()
            },
            async chooseAvatar(e){
            
                        const result = await this.$api.uploadImg({filePath:e.detail.avatarUrl})
                        console.log(result)
                        
                        // sureJoin()
						this.personaModel.avatar =operate.api+'storage/'+result.filename
                
            },
			async save(){
				 let vm =this
                uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
                    .select("#nickname-input")  
                    .fields({  
                        properties: ["value"],  
                    })  
                    .exec( (res) => {  
                        const nickName = res?.[0]?.value  
                        console.log('昵称', nickName)  
						vm.personaModel.nickname= nickName
						if(!vm.personaModel.realname) return vm.$utils.msg('请输入真实姓名')
						if(!vm.personaModel.nickname) return vm.$utils.msg('请输入艺名')
						if(!vm.personaModel.category_id) return vm.$utils.msg('请选择您的艺术类别')
						if(!vm.personaModel.phone) return vm.$utils.msg('请输入您的手机号')
						  vm.$api.saveArt(vm.personaModel).then(res=>{
							  if(res.code==1){
							      vm.$utils.msg('申请成功')
							      setTimeout(()=>{
							          uni.navigateBack()
							      },800)
							  }else{
							      vm.$utils.msg(res.msg)
							  }
						  })
						 
                    })
					
                // if(!this.checkboxValue.length)  return this.$utils.msg('请阅读并勾选隐私协议')
              
            },
          
            getPhoneNumber(e){
                console.log(e)
            }
		}
	}
</script>

<style lang="scss" scoped>
        
    .header{
        margin-top: 52rpx;
        margin-bottom: 40rpx;
       font-weight: 600;
       font-size: 36rpx;
       color: #000000;
       line-height: 36rpx;
      
    }
	.personalInfo {
		
		
        position: relative;
		.personalBox {
			padding:40rpx 48rpx 62rpx 48rpx;
            
		}
		
			.save_btn{
				width: 100%;
				height: 90rpx;
                margin-top: 52rpx;
                margin-bottom: 40rpx;
				background: #2CC6A1;
				border-radius: 8rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}
		
	}
        
    button{
        color: #303133;
            font-size: 28rpx;
            text-align: left;
    }
    image{
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
    }
</style>